<template>
    <div class="main">
        <el-card class="box-card">
            <Form :formobj="formobj" :formdata="formData" ref="form" :formrules="formrules"></Form>
            <div style="padding-left:100px">
                <el-button type="primary" @click="submit">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
import Form from "@/components/form.vue"
import { contentApiAdd, columnqueryAll, contentApiedit, contentApiqueryOne } from "@/api/webpage";
import { validateNum } from "@/utils/validator";
export default {
    name: "jcsjaddform",
    components: {
        Form
    },
    data() {
        return {
            options: [],
            formData: {
                columnId: '',
                ctitle: '',
                title: '',
                no: '',
                author:'',
                content: '',
                url: []
            },
            formobj: [
                { label: "所属栏目", key: "columnId", type: "select", options: [], disabled: true },
                { label: "图片", key: "url", type: "piclist" },
                { label: "作者", key: "author", type: "input" },
                { label: "标题", key: "title", type: "input" },
                { label: "排序", key: "no", type: "input" },
                { label: "内容", key: "content", type: "editor" }
            ],
            formrules: {
                title: [
                    { required: true, message: "请输入标题", trigger: "blur" },
                ],
                no: [
                    { required: false, message: "请输入序号", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入正整数",
                        trigger: "blur",
                    },
                ],
                content: [
                    { required: false, message: "请输入正文", trigger: "change" },
                ],
            },
        }
    },
    created() {
        if (this.$route.query.cid) {
            this.formobj[0].disabled = true
            this.formData.columnId = this.$route.query.cid

        } else {
            this.formobj[0].disabled = false
        }

        if (this.$route.query.id) {
            this.getdata(this.$route.query.id)
        }

        this.getlist();
    },
    methods: {
        getdata(id) {
            contentApiqueryOne({ id: id }).then(res => {

                if (res.code == 0) {
                    // let urls = res.data.url.split(",")
                    // let arrya = []
                    // arrya = urls.map((item, index) => {
                    //     return { name: index, url: '/show' + item }
                    // })
        
                    res.data.urlss = res.url
                    this.formData = res.data
                    // this.formData.url = arrya
                }
            })
        },
        getlist() {
            let data = {
                name: "",
                code: "",
                parentId: "",
            };
            columnqueryAll(data).then((res) => {
                if (res.code == 0) {
                    this.options = this.formobj[0].options = res.data.map(item => {
                        return { label: item.name, value: item.id }
                    });
                }
            });
        },
        handleCurrentChange(val) {
            this.params.page = val;
        },
        handleSizeChange(val) {
            this.params.pageSize = val;
            this.getlist()
        },
        submit() {
            this.$refs.form.getData().then(res => {
                console.log('%c [ res ]-112', 'font-size:13px; background:pink; color:#bf2c9f;', res.url)
                delete res.urlss
                delete res.fileName
                delete res.fileUrl
                if (this.$route.query.type == "edit") {
                    let urls = []
                    let lsArray = []
                    if(Array.isArray(res.url)){
                        lsArray = res.url
                    }else{
                        lsArray = res.url.split(",")
                    }
                    lsArray.forEach(item=>{
                        console.log('%c [item.url]: ', 'color: #bf2c9f; background: pink; font-size: 13px;', item.url)
                        if(item.includes('/show')){
                            urls.push(item.replace('/show',''))
                        }else{
                            urls.push(item)
                        }
                        
                    })
                    res.url = urls.join(",")
                    contentApiedit(res).then((response) => {
                        if (response.data == 1) {
                            this.$message.success("成功");
                            this.$router.go(-1)
                        } else {
                            this.$message.error("失败");
                        }
                    })
                        .catch((err) => {
                        });
                } else {
                    res.url = res.url.join(",")
                    contentApiAdd(res).then((response) => {
                        if (response.data == 1) {
                            this.$message.success("成功");
                            this.$router.go(-1)
                        } else {
                            this.$message.error("失败");
                        }
                    })
                        .catch((err) => {
                        });
                }
            })
        },
        cancel() {
            this.$router.go(-1)
        },
    }
}
</script>
<style scoped>
@import "~@/assets/css/adminstyle.css";
</style>